<template>
  <div class="chat">
    <h1>房间:{{room}}  人数:{{userList.length}}</h1>
    <el-row :gutter="20">
      <el-col :span="4" style="border:1px solid #ccc;height:341px;overflow-y:scroll;">
        <div>
           <p v-for="(user,index) in userList" :key="index">{{user}}</p>
        </div>
      </el-col>
      <el-col :span="20">
         <div class="message">
            <p v-for="(m,index) in recMessages" :key="index">{{m}}</p>
         </div>
      </el-col>
    </el-row>
    
    <div class="users">
      <span>{{this.message.from}} TO:</span>
      <el-select v-model="message.to" placeholder="请选择">
        <el-option v-for="item in userList" :key="item" :label="item" :value="item"></el-option>
        <el-option key="all" label="all" value="all"></el-option>
      </el-select>
    </div>
    <div class="send">
      <textarea
        type="textarea"
        placeholder="请输入内容"
        rows="3"
        @keyup.enter="send"
        v-model="message.body"
      ></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      message: {
        from: sessionStorage.getItem("username"),
        to: "all",
        body: ""
      },
      userList: [],
      recMessages: [],
      ws: null,
      room: sessionStorage.getItem("room")
    };
  },
  mounted() {
    this.ws = new WebSocket("ws://localhost:8081/ws/" + this.room);
    this.ws.onopen = this.onopen;
    this.ws.onmessage = this.onmessage;
    this.ws.onclose = this.onclose;
  },
  methods: {
    onopen() {
      this.ws.send(this.message.from);
    },
    onmessage(evt) {
      if (Array.isArray(JSON.parse(evt.data))) {
       if(JSON.parse(evt.data).length>this.userList.length){
        let newUser = JSON.parse(evt.data).filter(user=>!this.userList.includes(user));
           newUser.forEach(user=>{
                this.$notify({
                  title: "上线提醒",
                  message: user+" 已经进入房间",
                  type: "success"
                });
           });
          
       }else{ 
         let newUser = this.userList.filter(user=>!JSON.parse(evt.data).includes(user));
          newUser.forEach(user=>{
               this.$notify({
                title: "下线提醒",
                message: user+" 离开房间",
                type: "warning"
              });
          });
         
       }
        
        //console.log(JSON.parse(evt.data));
        this.$set(this, "userList", JSON.parse(evt.data));
      } else {
        this.recMessages = this.recMessages.concat(JSON.parse(evt.data));
      }
    },
    //发送消息
    send() {
      this.ws.send(JSON.stringify(this.message));
     // console.log("发消息", this.message);
      //  this.$set(this.message,'body','')
    },
    onclose() {
      console.log("关闭");
    }
  },
  beforeDestroy() {
    console.log("关闭连接");
    this.ws.close();
  }
};
</script>
<style scoped lang="less">
.chat {
  height: 100vh;
  > .users {
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
   .message {
    padding: 20px;
    height: 300px;
    border: 1px solid #ccc;
    overflow-y: scroll;
    text-align: left;
  }
  > .send {
    > textarea {
      width: 100%;
      resize: none;
    }
  }
}
</style>